<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>HTML &amp; CSS Visual Quickstart Guide (Eighth Edition)</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/code-examples.css" />

	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<![endif]-->
</head>
<body class="examples">
<div class="container">
<!-- ==== START MASTHEAD ==== -->
<header role="banner">
	<p class="series">Visual <span>Quickstart</span> Guide</p>
	
	<div class="masthead clearfix">
		<p class="title"><a href="/">HTML and CSS</a> <small>Eighth Edition</small></p>
	
		<p class="authors">Elizabeth Castro <span>&#8226;</span> Bruce Hyslop</p>
	</div>
</header>
<!-- end masthead -->

<!-- ===== START NAV ===== -->
<div class="sidebar nav">	
	<a href="http://www.peachpit.com/store/html-and-css-visual-quickstart-guide-9780321928832" rel="external"><img src="img/cover-sm-htmlcssvqs-8ed.jpg" width="160" height="206" alt="&quot;HTML and CSS, Eight Edition: Visual QuickStart Guide book cover" /></a>
	
	<h2 id="chapters-list">Code Chapters:</h2>
	
	<nav role="navigation">
		<ul>
			<li><a href="#chapter-1" title="Chapter 1 code">01</a></li>
			<li><a href="#chapter-3" title="Chapter 3 code">03</a></li>
			<li><a href="#chapter-4" title="Chapter 4 code">04</a></li>
			<li><a href="#chapter-5" title="Chapter 5 code">05</a></li>
			<li><a href="#chapter-6" title="Chapter 6 code">06</a></li>
			<li><a href="#chapter-7" title="Chapter 7 code">07</a></li>
			<li><a href="#chapter-8" title="Chapter 8 code">08</a></li>
			<li><a href="#chapter-9" title="Chapter 9 code">09</a></li>
			<li><a href="#chapter-10" title="Chapter 10 code">10</a></li>
			<li><a href="#chapter-11" title="Chapter 11 code">11</a></li>
			<li><a href="#chapter-12" title="Chapter 12 code">12</a></li>
			<li><a href="#chapter-13" title="Chapter 13 code">13</a></li>
			<li><a href="#chapter-14" title="Chapter 14 code">14</a></li>
			<li><a href="#chapter-15" title="Chapter 15 code">15</a></li>
			<li><a href="#chapter-16" title="Chapter 16 code">16</a></li>
			<li><a href="#chapter-17" title="Chapter 17 code">17</a></li>
			<li><a href="#chapter-18" title="Chapter 18 code">18</a></li>
			<li><a href="#chapter-19" title="Chapter 19 code">19</a></li>
			<li><a href="#chapter-20" title="Chapter 20 code">20</a></li>
		</ul>
	</nav>
</div>
<!-- end nav -->

<!-- ===== START MAIN CONTENT ===== -->
<main role="main">
<div class="toc code">
	<h1>Code Examples</h1>

	<header>
		<p class="intro">Scroll down the page or select a chapter from the left to view the code examples.</p>
		
		<div class="note">
			<p><strong>Notes:</strong></p>
		
			<ul>
				<li>The page numbers shown below aren't necessarily accurate if you have either the <abbr title="electronic publication">EPUB</abbr> or Kindle version of the book, because pages may flow differently in those formats.</li>
				<li>"Fig" is short for "Figure" and "Figs" is short for "Figures."</li>
				<li>An item marked as an "Extra" represents an example that doesn't appear in the book.</li>
				<li>Chapters 2 and 21 aren't shown because they don't contain any examples.</li>
			</ul>
		</div>
	</header>

	<!-- ==== Chapter 1 ==== -->
	<h2 id="chapter-1"><span>Chapter 1</span> Web Page Building Blocks</h2>
	<ol class="topics">
		<li>A Basic HTML Page
			<p><span>Page 4, Fig A:</span> <a href="chapter-01/basic-html-page-no-content.html">basic-html-page-no-content.html</a> (no content)</p>
			<p><span>Page 6, Fig C:</span> <a href="chapter-01/basic-html-page.html">basic-html-page.html</a> (with content)</p>
		</li>
		<li>A Web Page's Text Content
			<p><span>Page 12, Figs A and C:</span> <a href="chapter-01/page-text-content.html">page-text-content.html</a></p>
		</li>
		<li>A Browser's Default Display of Webpages
			<p><span>Page 24, Fig A:</span> <a href="chapter-01/basic-html-page-with-2nd-paragraph.html">basic-html-page-with-2nd-paragraph.html</a></p>
			
		</li>
	</ol>
	
	<!-- ==== Chapter 3 ==== -->
	<h2 id="chapter-3"><span>Chapter 3</span> Basic HTML Structure</h2>

	<div class="note" id="chapter-03-structure-final">
		<p><strong>Note:</strong> The majority of this chapter covers evolving the structure of a page's content. The individual steps are shown after this box. The end result is:</p>
		<p><a href="chapter-03/structure-final.html">structure-final.html</a></p>
	</div>

	<ol class="topics">
		<li>Starting Your Web Page
			<p><span>Page 44, Fig A:</span> <a href="chapter-03/starting-web-page.html">starting-web-page.html</a></p>
		</li>
		<li>Creating a Title
			<p><span>Page 48, Fig A:</span> <a href="chapter-03/title-element.html">title-element.html</a></p>
		</li>
		<li>Creating Headings
			<p><span>Page 50, Fig A:</span> <a href="chapter-03/headings.html">headings.html</a></p>
			<p><span>Page 50, Fig B:</span> <a href="chapter-03/headings-user-guide.html">headings-user-guide.html</a></p>
			<p><span>Page 51, Fig C:</span> <a href="chapter-03/headings-h1-h6-default-display.html">headings-h1-h6-default-display.html</a></p>
			<p><span>Page 52, Fig D:</span> <a href="chapter-03/headings-subheading.html">headings-subheading.html</a></p>
		</li>
		<li>Creating a Header
			<p><span>Page 54, Fig A:</span> <a href="chapter-03/header.html">header.html</a></p>
			<p><span>Page 55, Fig D:</span> <a href="chapter-03/header-two-header-elements.html">header-two-header-elements.html</a></p>
		</li>
		<li>Marking Navigation
			<p><span>Page 56, Fig A:</span> <a href="chapter-03/nav.html">nav.html</a></p>
			<p><span>Page 58, Fig C:</span> <a href="chapter-03/nav-deeper-look.html">nav-deeper-look.html</a></p>
		</li>
		<li>Marking the Main Area of a Webpage
			<p><span>Page 59, Fig A:</span> <a href="chapter-03/main-content.html">main-content.html</a></p>
		</li>
		<li>Creating an Article
			<p><span>Page 60, Fig A:</span> <a href="chapter-03/article.html">article.html</a></p>
			<p><span>Page 62, Figs C + D:</span> <a href="chapter-03/article-with-footer-and-comments.html">article-with-footer-and-comments.html</a></p>
		</li>
		<li>Defining a Section
			<p><span>Page 63, Fig A:</span> <a href="chapter-03/section-news-site.html">section-news-site.html</a></p>
			<p><span>Page 63, Fig B:</span> <a href="chapter-03/section-graduation-program.html">section-graduation-program.html</a></p>
		</li>
		<li>Specifying an Aside
			<p><span>Page 65, Fig A:</span> <a href="chapter-03/aside.html">aside.html</a></p>
			<p><span>Page 68, Ex 1:</span> <a href="chapter-03/aside-nested.html">aside-nested.html</a></p>
			<p><span>Page 69, Ex 2:</span> <a href="chapter-03/aside-with-nav.html">aside-with-nav.html</a></p>
		</li>
		<li>Creating a Footer
			<p><span>Page 70, Fig A:</span> <a href="chapter-03/footer.html">footer.html</a></p>
			<p><span>Page 72, Fig C:</span> <a href="chapter-03/footer-larger.html">footer-larger.html</a></p>
			<p><span>Page 72, Fig D:</span> <a href="chapter-03/footer-nested-in-article.html">footer-nested-in-article.html</a></p>
		</li>
		<li>Creating Generic Containers
			<p><span>Page 73, Fig A:</span> <a href="chapter-03/div-none-but-page-styled.html">div-none-but-page-styled.html</a></p>
			<p><span>Page 74, Fig B + C:</span> <a href="chapter-03/div-with-more-styling.html">div-with-more-styling.html</a></p>
			<p><span>Page 75, Fig D:</span> <a href="chapter-03/div-no-page-styling.html">div-no-page-styling.html</a></p>
		</li>
		<li>Naming Elements with a Class or ID
			<p><span>Page 82, Fig A:</span> <a href="chapter-03/naming-with-class-id.html">naming-with-class-id.html</a></p>
		</li>
		<li>Adding the Title Attribute to Elements
			<p><span>Page 84, Fig A:</span> <a href="chapter-03/title-attribute.html">title-attribute.html</a></p>
		</li>
		<li>Adding Comments
			<p><span>Page 85, Fig A:</span> <a href="chapter-03/comments.html">comments.html</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<!-- ==== Chapter 4 ==== -->
	<h2 id="chapter-4"><span>Chapter 4</span> Text</h2>

	<ol class="topics">
		<li>Starting a New Paragraph
			<p><span>Page 88, Fig A:</span> <a href="chapter-04/paragraphs.html">paragraphs.html</a></p>
		</li>
		<li>Specifying Fine Print
			<p><span>Page 89, Fig A:</span> <a href="chapter-04/specifying-fine-print.html">specifying-fine-print.html</a></p>
		</li>
		<li>Marking Important and Emphasized Text
			<p><span>Page 90, Fig A:</span> <a href="chapter-04/important-and-emphasized-text.html">important-and-emphasized-text.html</a></p>
		</li>
		<li>Creating a Figure
			<p><span>Page 92, Fig A:</span> <a href="chapter-04/creating-a-figure.html">creating-a-figure.html</a></p>
			<p><span>Page 93, Fig C:</span> <a href="chapter-04/creating-a-figure-styled.html">creating-a-figure-styled.html</a></p>
		</li>
		<li>Indicating a Citation or Reference
			<p><span>Page 94, Fig A:</span> <a href="chapter-04/indicating-a-citation.html">indicating-a-citation.html</a></p>
		</li>
		<li>Quoting Text
			<p><span>Page 95, Fig A:</span> <a href="chapter-04/quoting-text-blockquote.html">quoting-text-blockquote.html</a></p>
			<p><span>Page 95, Fig B:</span> <a href="chapter-04/quoting-text-blockquote-in-figure.html">quoting-text-blockquote-in-figure.html</a></p>
			<p><span>Page 95, Fig D:</span> <a href="chapter-04/quoting-text-q.html">quoting-text-q.html</a></p>
			<p><span>Page 97, tip:</span> <a href="chapter-04/quoting-text-q-nested.html">quoting-text-q-nested.html</a></p>
		</li>
		<li>Specifying Time
			<p><span>Page 98, Fig A:</span> <a href="chapter-04/specifying-time.html">specifying-time.html</a></p>
			<p><span>Page 99, Fig C:</span> <a href="chapter-04/specifying-time-as-article-date.html">specifying-time-as-article-date.html</a></p>
		</li>
		<li>Explaining Abbreviations
			<p><span>Page 101, Fig A:</span> <a href="chapter-04/abbreviations.html">abbreviations.html</a></p>
		</li>
		<li>Defining a Term
			<p><span>Page 103, Fig A:</span> <a href="chapter-04/defining-instance-of-term.html">defining-instance-of-term.html</a></p>
		</li>
		<li>Creating Superscripts and Subscripts
			<p><span>Page 104, Fig A:</span> <a href="chapter-04/superscripts.html">superscripts.html</a></p>
		</li>
		<li>Adding Author Contact Information
			<p><span>Page 106, Fig A:</span> <a href="chapter-04/author-contact-information.html">author-contact-information.html</a></p>
		</li>
		<li>Noting Edits and Inaccurate Text
			<p><span>Page 108, Fig A:</span> <a href="chapter-04/noting-edits-del-ins.html">noting-edits-del-ins.html</a></p>
			<p><span>Page 109, Fig C:</span> <a href="chapter-04/noting-edits-del-ins-example2.html">noting-edits-del-ins-example2.html</a></p>
			<p><span>Page 110, Fig E:</span> <a href="chapter-04/noting-inaccurate-text-s.html">noting-inaccurate-text-s.html</a></p>
		</li>
		<li>Marking Up Code
			<p><span>Page 112, Fig A:</span> <a href="chapter-04/marking-up-code.html">marking-up-code.html</a></p>
			<p><span>Page 113 (sidebar):</span> <a href="chapter-04/kbd-samp-var.html">kbd-samp-var.html</a></p>
		</li>
		<li>Using Preformatted Text
			<p><span>Page 114, Fig A:</span> <a href="chapter-04/preformatted-text.html">preformatted-text.html</a></p>
		</li>
		<li>Highlighting Text
			<p><span>Page 116, Fig A:</span> <a href="chapter-04/highlighting-text.html">highlighting-text.html</a></p>
			<p><span>Page 117, Fig C:</span> <a href="chapter-04/highlighting-text-example2.html">highlighting-text-example2.html</a></p>
		</li>
		<li>Creating a Line Break
			<p><span>Page 118, Fig A:</span> <a href="chapter-04/creating-line-break.html">creating-line-break.html</a></p>
		</li>
		<li>Creating Spans
			<p><span>Page 120, Fig A:</span> <a href="chapter-04/creating-spans.html">creating-spans.html</a></p>
		</li>
		<li>Other Elements
			<p><span>Page 122 (<code>u</code> element):</span> <a href="chapter-04/unarticulated-text.html">unarticulated-text.html</a></p>
			<p><span>Page 123 (<code>wbr</code> element):</span> <a href="chapter-04/creating-line-break-opportunity.html">creating-line-break-opportunity.html</a></p>
			<p><span>Page 124 (<code>ruby</code>, <code>rp</code>, and <code>rt</code> elements):</span> <a href="chapter-04/ruby-annotations.html">ruby-annotations.html</a></p>
			<p><span>Page 124 (<code>ruby</code>, <code>rp</code>, and <code>rt</code> elements):</span> <a href="chapter-04/ruby-annotations-example2.html">ruby-annotations-example2.html</a></p>
			<p><span>Page 127 (<code>bdi</code> element):</span> <a href="chapter-04/bdi.html">bdi.html</a></p>
			<p><span>Page 128 (<code>meter</code> element):</span> <a href="chapter-04/using-meter-to-provide-gauge.html">using-meter-to-provide-gauge.html</a></p>
			<p><span>Page 130 (<code>progress</code> element):</span> <a href="chapter-04/indicating-progress.html">indicating-progress.html</a></p>
			<p><span>Page 130 (<code>progress</code> element):</span> <a href="chapter-04/indicating-progress-example2.html">indicating-progress-example2.html</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<!-- ==== Chapter 5 ==== -->
	<h2 id="chapter-5"><span>Chapter 5</span> Images</h2>
	<div class="note">
		<p><strong>Note:</strong> To keep the examples simple for this chapter, all the HTML and image files are in the same folder. This is <em>absolutely not</em> what I recommend you do when building your pages. Instead, it is common practice to keep your files organized by placing images in a separate folder ("img" and "images" are popular folder names). The path to your image in the <code>src</code> value of each <code>img</code> element needs to reflect this.</p> 
	
		<p>For example, currently the HTML that loads the image in <code>specifying-img-size.html</code> is as follows (the image path is highlighted):</p>
		
		<p><code>&lt;img src="<mark>cornermarket.jpg</mark>" alt="Oranges, bananas, apples, and other fruit abound at the Mercat de la Boquería." width="300" height="399" /&gt;</code></p>
		
		<p>If you were to move <code>cornermarket.jpg</code> to a folder called "images" in the same directory as the HTML page, you would need to change the <code>src</code> value in the code as shown below:</p>
		
		<p><code>&lt;img src="<mark>images/cornermarket.jpg</mark>" alt="Oranges, bananas, apples, and other fruit abound at the Mercat de la Boquería." width="300" height="399" /&gt;</code></p>
		
		<p>You can see working examples in the <a href="#chapter-6">Chapter 6</a> files (such as the first page, <code>link-to-page.html</code>). They reference images in a folder called <code>img</code>.</p>
	</div>
	
	<ol class="topics">
		<li>Images for the Web: Size (dimensions)
			<p><span>Page 136, Fig C:</span> <a href="chapter-05/size-big.html">size-big.html</a></p>
			<p><span>Page 137, Fig D:</span> <a href="chapter-05/size-small.html">size-small.html</a></p>
		</li>
		<li>Images for the Web: Transparency
			<p><span>Page 138, Fig E1:</span> <a href="chapter-05/transparency-stars-blue-bg.html">transparency-stars-blue-bg.html</a></p>
			<p><span>Page 138, Fig E2:</span> <a href="chapter-05/transparency-stars-red-gradient-bg.html">transparency-stars-red-gradient-bg.html</a></p>
		</li>
		<li>Inserting Images on a Page
			<p><span>Page 145, Fig A:</span> <a href="chapter-05/inserting-an-image.html">inserting-an-image.html</a></p>
		</li>
		<li>Offering Alternative Text
			<p><span>Page 147, Fig A:</span> <a href="chapter-05/alternative-text.html">alternative-text.html</a></p>
		</li>
		<li>Specifying Image Size
			<p><span>Page 151, Fig E:</span> <a href="chapter-05/specifying-img-size.html">specifying-img-size.html</a></p>
		</li>
		<li>Scaling Images with the Browser
			<p><span>Page 152, Fig A:</span> <a href="chapter-05/scaling-image-before.html">scaling-image-before.html</a> (image shows at native size of 440x340)</p>
			<p><span>Page 152, Fig B:</span> <a href="chapter-05/scaling-image-after.html">scaling-image-after.html</a> (image is scaled down to 220x170)</p>
		</li>
		<li>Adding Icons for Your Web Site
			<p><span>Page 155:</span> <a href="chapter-05/favicon.html">favicon.html</a> (referencing them in your page explicitly)</p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 6 ==== -->
	<h2 id="chapter-6"><span>Chapter 6</span> Links </h2>
	<ol class="topics">
		<li>Creating a Link to Another Web Page (and Other Link Basics)
			<p><span>Page 159, Fig B:</span> <a href="chapter-06/link-to-page.html">link-to-page.html</a> (it has a link to <a href="chapter-06/pioneer-valley.html">pioneer-valley.html</a>)</p>
			<p><span>Page 160, Fig E:</span> <a href="chapter-06/link-to-page-on-another-site.html">link-to-page-on-another-site.html</a></p>
			<p><span>Page 161, Fig H:</span> <a href="chapter-06/block-level-link.html">block-level-link.html</a> (it has a link to <a href="chapter-06/giraffe-escapes.html">giraffe-escapes.html</a>)</p>		
		</li>
		<li>Creating and Linking to Anchors
			<p><span>Page 164, Fig A:</span> <a href="chapter-06/anchor-links.html">anchor-links.html</a></p>
		</li>
		<li>Creating Other Kinds of Links
			<p><span>Page 166, Fig A:</span> <a href="chapter-06/other-kinds-of-links.html">other-kinds-of-links.html</a></p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 7 ==== -->
	<h2 id="chapter-7"><span>Chapter 7</span> CSS Building Blocks</h2>
	<ol class="topics">
		<li>Constructing a Style Rule
			<p><span>Page 171, Figs B and C:</span> <a href="chapter-07/constructing-a-rule.html">constructing-a-rule.html</a></p>
		</li>
		<li>Adding Comments to Style Rules
			<p><span>Pages 172-173, Figs A through E:</span> <a href="chapter-07/css/css-comments.css">css-comments.css</a></p>
		</li>
		<li>Understanding Inheritance
			<p><span>Page 174, Fig A</span> <a href="chapter-07/inheritance-not-styled.html">inheritance-not-styled.html</a> (before CSS applied)</p>
			<p><span>Page 175, Fig C</span> <a href="chapter-07/css/inheritance.css">inheritance.css</a> (view results in <a href="chapter-07/inheritance.html">inheritance.html</a>)</p>
		</li>
		<li>The Cascade: When Rules Collide
			<p><span>Page 177, Figs A and B:</span> <a href="chapter-07/css/specificity.css">specificity.css</a> and <a href="chapter-07/specificity.html">specificity.html</a></p>
		</li>
		<li>A Property's Value
			<p><span>Page 184-185, Figs I and J:</span> <a href="chapter-07/css/rgba.css">rgba.css</a> and <a href="chapter-07/rgba.html">rgba.html</a></p>

			<p><span class="extra">Extra:</span> <a href="chapter-07/css/rgba-with-opaque-fallback-in-same-rule.css">rgba-with-opaque-fallback-in-same-rule.css</a></p>

			<p><span>Page 187, Fig O:</span> <a href="chapter-07/css/hsla.css">hsla.css</a> (view results in <a href="chapter-07/hsla.html">hsla.html</a>)</p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 8 ==== -->
	<h2 id="chapter-8"><span>Chapter 8</span> Working with Style Sheets</h2>
	<ol class="topics">
		<li>Creating an External Style Sheet
			<p><span>Page 190, Fig A:</span> <a href="chapter-08/style.css">style.css</a></p>
		</li>
		<li>Linking to External Style Sheets
			<p><span>Page 192, Figs A and B:</span> <a href="chapter-08/style.css">style.css</a> and <a href="chapter-08/link-external-style-sheet.html">link-external-style-sheet.html</a></p>
			
			<p><span>Page 193, Fig D:</span> <a href="chapter-08/link-external-style-sheet-example2.html">link-external-style-sheet-example2.html</a> (it also uses <a href="chapter-08/style.css">style.css</a>)</p>
		</li>
		<li>Creating an Embedded Style Sheet
			<p><span>Page 194, Fig A:</span> <a href="chapter-08/create-embedded-style-sheet.html">create-embedded-style-sheet.html</a></p>
		</li>
		<li>Applying Inline Styles
			<p><span>Page 196, Fig A:</span> <a href="chapter-08/apply-inline-style.html">apply-inline-style.html</a></p>
			<p><span>Page 197, Fig C and D:</span> <a href="chapter-08/class-instead-of-inline.html">class-instead-of-inline.html</a> and <a href="chapter-08/class-instead-of-inline.css">class-instead-of-inline.css</a></p>
		</li>
		<li>The Cascade and the Order of Styles
			<p><span>Page 198, Fig A:</span> <a href="chapter-08/style.css">style.css</a></p>
			<p><span>Page 198, Fig B:</span> <a href="chapter-08/importance-of-location.html">importance-of-location.html</a> (it also uses <a href="chapter-08/style.css">style.css</a>)</p>
			<p><span>Page 199, Fig D:</span> <a href="chapter-08/importance-of-location-example2.html">importance-of-location-example2.html</a> (it also uses <a href="chapter-08/style.css">style.css</a>)</p>
		</li>
		<li>Using Media-Specific Style Sheets
			<p><span>Page 200, Fig A:</span> <a href="chapter-08/media-specific-style-sheets.html">media-specific-style-sheets.html</a> (it also uses <a href="chapter-08/style.css">style.css</a> and <a href="chapter-08/print.css">print.css</a>)</p>
			<p><span>Page 201, Fig B:</span> <a href="chapter-08/base-styles-plus-media-print.css">base-styles-plus-media-print.css</a> (view results in <a href="chapter-08/base-styles-plus-media-print.html">base-styles-plus-media-print.html</a>)</p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 9 ==== -->
	<h2 id="chapter-9"><span>Chapter 9</span> Defining Selectors</h2>
	<ol class="topics">
		<li>Selecting Elements by Name
			<p><span>Pages 206-207, Figs A and B:</span> <a href="chapter-09/select-by-element-name.html">select-by-element-name.html</a> and <a href="chapter-09/css/name.css">name.css</a></p>
		</li>
		<li>Selecting Elements by Class or ID
			<p><span>Pages 208-209, Figs A and B:</span> <a href="chapter-09/select-by-class.html">select-by-class.html</a> and <a href="chapter-09/css/class.css">class.css</a></p>
			<p><span>Page 210 (third tip):</span> <a href="chapter-09/select-by-class-two-classes.html">select-by-class-two-classes.html</a> and <a href="chapter-09/css/class-two-classes.css">class-two-classes.css</a></p>
			<p><span>Page 210 (second-to-last tip):</span> <a href="chapter-09/select-by-id.html">select-by-id.html</a> and <a href="chapter-09/css/id.css">id.css</a></p>
		</li>
		<li>Selecting Elements by Context
			<p><span>Page 212, Figs A-C:</span> <a href="chapter-09/select-by-context.html">select-by-context.html</a> and <a href="chapter-09/css/context.css">context.css</a> (includes Figs B and C)</p>
			<p><span>Page 214, Fig E:</span> <a href="chapter-09/css/child-selector.css">child-selector.css</a> (view results in <a href="chapter-09/select-by-child-selector.html">select-by-child-selector.html</a>)</p>
			<p><span>Page 215, Fig G:</span> <a href="chapter-09/css/adjacent-sibling-combinator.css">adjacent-sibling-combinator.css</a> (view results in <a href="chapter-09/select-by-adjacent-sibling.html">select-by-adjacent-sibling.html</a>)</p>
		</li>
		<li>Selecting an Element That Is the First or Last Child
			<p><span>Page 216, Figs A and B:</span> <a href="chapter-09/select-by-first-child.html">select-by-first-child.html</a> and <a href="chapter-09/css/first-child-selector.css">first-child-selector.css</a></p>
			<p><span>Page 217, Fig D:</span> <a href="chapter-09/css/last-child.css">last-child.css</a> (view results in <a href="chapter-09/select-by-last-child.html">select-by-last-child.html</a>)</p>
		</li>
		<li>Selecting the First Letter or First Line of an Element
			<p><span>Page 218, Figs A and B:</span> <a href="chapter-09/select-by-first-letter.html">select-by-first-letter.html</a> and <a href="chapter-09/css/first-letter.css">first-letter.css</a></p>
			<p><span>Page 219, Fig D:</span> <a href="chapter-09/css/first-line.css">first-line.css</a> (view results in <a href="chapter-09/select-by-first-line.html">select-by-first-line.html</a>)</p>
		</li>
		<li>Selecting Links Based on Their State
			<p><span>Page 220, Figs A and B:</span> <a href="chapter-09/select-links-by-state.html">select-links-by-state.html</a> and <a href="chapter-09/css/links-by-state.css">links-by-state.css</a></p>
		</li>
		<li>Selecting Elements Based on Attributes
			<p><span>Page 222, Figs A and B:</span> <a href="chapter-09/select-by-attribute.html">select-by-attribute.html</a> and <a href="chapter-09/css/attribute-selector.css">attribute-selector.css</a></p>
		</li>
		<li>Specifying Groups of Elements
			<p><span>Pages 226, Figs A and B:</span> <a href="chapter-09/select-by-groups.html">select-by-groups.html</a> and <a href="chapter-09/css/groups.css">groups.css</a></p>
		</li>
		<li>Combining Selectors
			<p><span>Page 227, Fig A:</span> <a href="chapter-09/css/combining-selectors.css">combining-selectors.css</a> (view results in <a href="chapter-09/combining-selectors.html">combining-selectors.html</a>)</p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 10 ==== -->
	<h2 id="chapter-10"><span>Chapter 10</span> Formatting Text with Styles</h2>

	<div class="note">
		<p><strong>Note:</strong> The majority of this chapter covers evolving the formatting of a page's text and background. The individual steps are shown after this box. The end result is:</p>
		<p><a href="chapter-10/text-final.html">text-final.html</a> (it uses <a href="chapter-10/css/text-decoration.css">text-decoration.css</a>)</p>
	</div>

	<ol class="topics">
		<li>
			<p><span>Page 231, Fig C:</span> <a href="chapter-10/no-styles.html">no-styles.html</a> (page without any CSS applied except browser defaults)</p>
		</li>
		<li>Choosing a Font Family
			<p><span>Page 232, Fig A:</span> <a href="chapter-10/css/font-family.css">font-family.css</a> (view results in <a href="chapter-10/font-family.html">font-family.html</a>)</p>
		</li>
		<li>Specifying Alternate Fonts
			<p><span>Page 233, Fig A:</span> <a href="chapter-10/css/font-family-alternate.css">font-family-alternate.css</a> (view results in <a href="chapter-10/font-family-alternate.html">font-family-alternate.html</a>)</p>
		</li>
		<li>Creating Italics
			<p><span>Page 236, Fig A:</span> <a href="chapter-10/css/font-style-italic.css">font-style-italic.css</a> (view results in <a href="chapter-10/font-style-italic.html">font-style-italic.html</a>)</p>
			<p><span>Page 237 (sidebar)</span> <a href="chapter-10/real-italic-vs-faux-italic.html">real-italic-vs-faux-italic.html</a></p>
		</li>
		<li>Applying Bold Formatting
			<p><span>Page 238, Fig A:</span> <a href="chapter-10/css/font-weight-bold.css">font-weight-bold.css</a> (view results in <a href="chapter-10/font-weight-bold.html">font-weight-bold.html</a>)</p>
			<p><span>Page 239, Fig D:</span> <a href="chapter-10/font-weight-bold-numeric-weights.html">font-weight-bold-numeric-weights.html</a></p>
			<p><span>Page 239, Fig E:</span> <a href="chapter-10/real-bold-vs-faux-bold.html">real-bold-vs-faux-bold.html</a></p>
		</li>
		<li>Setting the Font Size
			<p><span>Page 240, Fig A:</span> <a href="chapter-10/css/font-size-pixels.css">font-size-pixels.css</a> (view results in <a href="chapter-10/font-size-pixels.html">font-size-pixels.html</a>)</p>
			<p><span>Page 241, Fig D:</span> <a href="chapter-10/css/font-size-ems.css">font-size-ems.css</a> (view results in <a href="chapter-10/font-size-ems.html">font-size-ems.html</a>)</p>
			<p><span>Page 243, Fig G:</span> <a href="chapter-10/css/font-size-rems.css">font-size-rems.css</a> (view results in <a href="chapter-10/font-size-rems.html">font-size-rems.html</a>)</p>
		</li>
		<li>Setting the Line Height
			<p><span>Page 245, Fig A:</span> <a href="chapter-10/css/line-height.css">line-height.css</a> (view results in <a href="chapter-10/line-height.html">line-height.html</a>)</p>
		</li>
		<li>Setting All Font Values at Once
			<p><span>Page 246, Fig A:</span> <a href="chapter-10/css/font-shorthand.css">font-shorthand.css</a> (view results in <a href="chapter-10/font-shorthand.html">font-shorthand.html</a>)</p>
		</li>
		<li>Setting the Color
			<p><span>Page 248, Fig A:</span> <a href="chapter-10/css/color.css">color.css</a> (view results in <a href="chapter-10/color.html">color.html</a>)</p>
		</li>
		<li>Changing the Text's Background
			<p><span>Page 250, Fig A:</span> <a href="chapter-10/css/background-color-figa.css">background-color-figa.css</a> (view results in <a href="chapter-10/background-color-figa.html">background-color-figa.html</a>)</p>
			<p><span>Page 251, Fig C:</span> <a href="chapter-10/css/background-color-figc.css">background-color-figc.css</a> (view results in <a href="chapter-10/background-color-figc.html">background-color-figc.html</a>)</p>
			<p><span>Page 251, Fig E:</span> <a href="chapter-10/css/background-color-plus-padding.css">background-color-plus-padding.css</a> (view results in <a href="chapter-10/background-color-plus-padding.html">background-color-plus-padding.html</a>)</p>
			<p><span>Page 252, Fig G:</span> <a href="chapter-10/css/background-img-repeat.css">background-img-repeat.css</a> (view results in <a href="chapter-10/background-img-repeat.html">background-img-repeat.html</a>)</p>
			<p><span>Page 253, Fig I:</span> <a href="chapter-10/background-img-repeat-x-white-bg.html">background-img-repeat-x-white-bg.html</a></p>
			<p><span>Page 253, Fig K (shown on left side of L):</span> <a href="chapter-10/background-img-repeat-x-black-bg.html">background-img-repeat-x-black-bg.html</a> <br /> This doesn't have the rule in Fig K fthat sets <code>html { min-height: 100%; }</code></p>
			<p><span>Page 253, Fig K (shown on right side of L):</span> <a href="chapter-10/background-img-repeat-x-black-bg-2.html">background-img-repeat-x-black-bg-2.html</a></p>
			<p><span>Page 254, Fig M:</span> <a href="chapter-10/background-img-fixed.html">background-img-fixed.html</a></p>
			<p><span>Page 254, Fig O:</span> <a href="chapter-10/background-img-scroll.html">background-img-scroll.html</a> (the default behavior)</p>
			<p><span>Page 255, Fig P:</span> <a href="chapter-10/css/background-img-position.css">background-img-position.css</a> (view results in <a href="chapter-10/background-img-position.html">background-img-position.html</a>)</p>
		</li>
		<li>Controlling Spacing
			<p><span>Page 257, Fig A:</span> <a href="chapter-10/css/letter-spacing.css">letter-spacing.css</a> (view results in <a href="chapter-10/letter-spacing.html">letter-spacing.html</a>)</p>
		</li>
		<li>Adding Indents
			<p><span>Page 258, Fig A:</span> <a href="chapter-10/css/text-indent.css">text-indent.css</a> (view results in <a href="chapter-10/text-indent.html">text-indent.html</a>)</p>
		</li>
		<li>Aligning Text
			<p><span>Page 259, Fig A:</span> <a href="chapter-10/css/aligning-text.css">aligning-text.css</a> (view results in <a href="chapter-10/aligning-text.html">aligning-text.html</a>)</p>
		</li>
		<li>Changing the Text Case
			<p><span>Page 260, Fig A:</span> <a href="chapter-10/css/text-case.css">text-case.css</a> (view results in <a href="chapter-10/text-case.html">text-case.html</a>)</p>
		</li>
		<li>Using Small Caps
			<p><span>Page 261, Fig A:</span> <a href="chapter-10/css/small-caps.css">small-caps.css</a> (view results in <a href="chapter-10/small-caps.html">small-caps.html</a>)</p>
		</li>
		<li>Decorating Text
			<p><span>Page 262, Fig A:</span> <a href="chapter-10/css/text-decoration.css">text-decoration.css</a> (view results in <a href="chapter-10/text-decoration.html">text-decoration.html</a>)</p>
		</li>
		<li>Setting White Space Properties
			<p><span>Page 264, Fig A:</span> <a href="chapter-10/css/whitespace.css">whitespace.css</a> and <a href="chapter-10/whitespace.html">whitespace.html</a></p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 11 ==== -->
	<h2 id="chapter-11"><span>Chapter 11</span> Layout with Styles</h2>
	<div class="note" id="chapter-11-finished-page">
		<p><strong>Note:</strong> The vast majority of this chapter entails evolving a single page layout for the fictitious <cite>Le Journal</cite> site. The CSS file progresses throughout the chapter, building upon the styles added in the previous pages. The end result is:</p>
		<p><a href="chapter-11/finished-page.html">finished-page.html</a> and <a href="chapter-11/css/lejournal.css">lejournal.css</a></p>
	</div>
	
	<ol class="topics">
		<li>Structuring Your Pages
			<p><span>Pages 269-270, Fig A:</span> <a href="chapter-11/no-styles.html">no-styles.html</a> <br />(the same as finished-page.html, but without any CSS applied except browser defaults)</p>
		</li>
		<li>Styling HTML5 Elements in Older Browsers
			<p><span>Pages 272-273, Figs A and E:</span> <a href="chapter-11/css/html5-elements-styling.css">html5-elements-styling.css</a> (step 1) and <a href="chapter-11/html5-elements-styling.html">html5-elements-styling.html</a> (step 2, last paragraph)</p>
		</li>
		<li>Resetting or Normalizing Default Styles
			<p><span>Page 274, Fig A:</span> <a href="chapter-11/reset.html">reset.html</a> and <a href="chapter-11/css/reset.css">reset.css</a></p>
			<p><span>Page 275, Fig B:</span> <a href="chapter-11/normalize.html">normalize.html</a> and <a href="chapter-11/css/normalize.css">normalize.css</a></p>
		</li>
		<li>Setting the Border
			<p><span>Page 291, Fig K:</span> <a href="chapter-11/border-styles.html">border-styles.html</a></p>
		</li>

		<li>Determining How to Treat Overflow
			<p><span>Page 305, Fig A:</span> <a href="chapter-11/overflow.html">overflow.html</a></p>
		</li>
		
		<li>Aligning Elements Vertically
			<p><span>Page 306, Figs A and C:</span> <a href="chapter-11/vertical-align.html">vertical-align.html</a> and <a href="chapter-11/css/vertical-align.css">vertical-align.css</a></p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>

	<!-- ==== CHAPTER 12 ==== -->
	<h2 id="chapter-12"><span>Chapter 12</span> Building Responsive Webpages</h2>
	<ol class="topics">
		<li>Putting It All Together
			<p class="special"><em>The finished page as shown in the steps throughout section:</em></p>
			<p><span>Page 326-331, Figs A-K:</span> <a href="chapter-12/finished-page.html">finished-page.html</a> and <a href="chapter-12/css/lejournal.css">lejournal.css</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<!-- ==== CHAPTER 13 ==== -->
	<h2 id="chapter-13"><span>Chapter 13</span> Working with Web Fonts</h2>
	
	<div class="note">
		<p><strong>Note:</strong> The filenames in the samples below do not always correlate to the filenames mentioned in the chapter. For instance, both <code>example.css</code> and <code>styling-text-with-web-font.html</code> evolve during the chapter, so I had to create multiple versions of them to provide you the files in their various stages.</p>
	</div>
	
	<ol class="topics">
		<li>Understanding the @font-face Rule
			<p><span>Page 345, Fig A:</span> <a href="chapter-13/font-squirrel-example/understanding-font-face.css">understanding-font-face.css</a></p>
		</li>
		<li>Styling Text with a Web Font
			<p><span>Page 346-347, Figs A and E:</span> <a href="chapter-13/font-squirrel-example/example-regular.html">example-regular.html</a> and <a href="chapter-13/font-squirrel-example/example-regular.css">example-regular.css</a></p>
		</li>
		<li>Applying Italics and Bold with a Web Font
			<p><span>Page 351, Fig F:</span> <a href="chapter-13/font-squirrel-example/example-regular-italic.css">example-regular-italic.css</a> (you can view it in <a href="chapter-13/font-squirrel-example/example-regular-italic.html">example-regular-italic.html</a>)</p>
			<p><span>Page 353, Fig K:</span> <a href="chapter-13/font-squirrel-example/example-regular-italic-bold.css">example-regular-italic-bold.css</a> (you can view it in <a href="chapter-13/font-squirrel-example/example-regular-italic-bold.html">example-regular-italic-bold.html</a>)</p>
			<p><span>Page 354-355, Figs M and P:</span> <a href="chapter-13/font-squirrel-example/example-regular-italic-bold-and-bolditalic.css">example-regular-italic-bold-and-bolditalic.css</a> (you can view it in <a href="chapter-13/font-squirrel-example/example-regular-italic-bold-and-bolditalic.html">example-regular-italic-bold-and-bolditalic.html</a>)</p>
			<p><span>Page 356, Last tip and Fig R:</span> <a href="chapter-13/font-squirrel-example-organized/styling-text-with-web-font.html">styling-text-with-web-font.html</a> and <a href="chapter-13/font-squirrel-example-organized/css/example.css">example.css</a></p>
		</li>
		<li>Using Web Fonts from Google Fonts
			<p><span>Page 358-359, Figs F and G:</span> <a href="chapter-13/google-fonts-example/using-google-web-font.html">using-google-web-font.html</a> and <a href="chapter-13/google-fonts-example/style.css">style.css</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
		
	<h2 id="chapter-14"><span>Chapter 14</span> Enhancements with CSS3</h2>
	<ol class="topics">
		<li>Rounding the Corners of Elements
			<p><span>Page 365, Figs A and B:</span> <a href="chapter-14/rounded-corners.html">rounded-corners.html</a> and <a href="chapter-14/css/rounded-corners.css">rounded-corners.css</a></p>
			<p><span>Page 367, Fig F:</span> <a href="chapter-14/css/rounded-corners-more-examples.css">rounded-corners-more-examples.css</a> (view results in <a href="chapter-14/rounded-corners-more-examples.html">rounded-corners-more-examples.html</a>)</p>
		</li>
		<li>Adding Drop Shadows to Text
			<p><span>Page 368, Figs A and B:</span> <a href="chapter-14/text-shadow.html">text-shadow.html</a> and <a href="chapter-14/css/text-shadow.css">text-shadow.css</a></p>
		</li>
		<li>Adding Drop Shadows to Other Elements
			<p><span>Page 370, Figs A, B and D:</span> <a href="chapter-14/box-shadow.html">box-shadow.html</a> and <a href="chapter-14/css/box-shadow.css">box-shadow.css</a></p>
		</li>
		<li>Applying Multiple Backgrounds
			<p><span>Page 373, Figs A and B:</span> <a href="chapter-14/multiple-backgrounds.html">multiple-backgrounds.html</a> and <a href="chapter-14/css/multiple-backgrounds.css">multiple-backgrounds.css</a></p>
			<p><span>Page 375, Fig E:</span> <a href="chapter-14/css/multiple-backgrounds-shorthand.css">multiple-backgrounds-shorthand.css</a> (view results in <a href="chapter-14/multiple-backgrounds-shorthand.html">multiple-backgrounds-shorthand.html</a>)</p>
		</li>
		<li>Using Gradient Backgrounds
			<p><span>Page 376-379, Figs A-I:</span> <a href="chapter-14/gradients.html">gradients.html</a> and <a href="chapter-14/css/gradients.css">gradients.css</a></p>
		</li>
		<li>Setting the Opacity of Elements
			<p><span>Page 382, Fig A:</span> <a href="chapter-14/opacity-default.html">opacity-default.html</a> (it also uses <a href="chapter-14/css/opacity-default.css">opacity-default.css</a>)</p>
			<p><span>Page 382, Fig C:</span> <a href="chapter-14/css/opacity-example-2.css">opacity-example-2.css</a> (view results in <a href="chapter-14/opacity-example-2.html">opacity-example-2.html</a>)</p>
			<p><span>Page 383, Fig E:</span> <a href="chapter-14/opacity-example-3.html">opacity-example-3.html</a> and <a href="chapter-14/css/opacity-example-3.css">opacity-example-3.css</a></p>
			<p><span>Page 395, Fig E:</span> <a href="chapter-14/css/opacity-plus-ie-filter.css">opacity-plus-ie-filter.css</a> (view results in <a href="chapter-14/opacity-plus-ie-filter.html">opacity-plus-ie-filter.html</a>)</p>
		</li>
		<li id="generated-content-examples">Effects with Generated Content
			<p><span>Page 384, Fig A:</span> <a href="chapter-14/generated-content-without.html">generated-content-without.html</a></p>
			<p><span>Page 384, Fig C:</span> <a href="chapter-14/generated-content-arrows.html">generated-content-arrows.html</a></p>
			<p><span>Page 384-385, Figs E and F:</span> <a href="chapter-14/generated-content-bubble-triangle.html">generated-content-bubble-triangle.html</a> and <a href="chapter-14/css/generated-content-bubble-triangle.css">generated-content-bubble-triangle.css</a></p>
		</li>
		<li>Combining Images with Sprites
			<p><span>Page 387, Fig A:</span> <a href="chapter-14/sprite-without.html">sprite-without.html</a> (it uses <a href="chapter-14/css/sprite-without.css">sprite-without.css</a>)</p>
			<p><span>Pages 388, Fig C:</span> <a href="chapter-14/css/sprite.css">sprite.css</a> (it uses the same HTML as in Fig A: <a href="chapter-14/sprite.html">sprite.html</a>)</p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<h2 id="chapter-15"><span>Chapter 15</span> Lists</h2>
	<ol class="topics">
		<li>Creating Ordered and Unordered Lists
			<p><span>Page 390, Fig A:</span> <a href="chapter-15/ordered-list.html">ordered-list.html</a></p>
			<p><span>Page 391, Fig C:</span> <a href="chapter-15/unordered-list.html">unordered-list.html</a></p>
			<p><span>Page 391-392, Figs E and F:</span> <a href="chapter-15/unordered-list-spacing.html">unordered-list-spacing.html</a> and <a href="chapter-15/css/unordered-list-spacing.css">unordered-list-spacing.css</a></p>
		</li>
		<li>Choosing Your Markers
			<p><span>Page 393, Figs A and B:</span> <a href="chapter-15/choosing-your-markers.html">choosing-your-markers.html</a> (the CSS is embedded in the HTML)</p>
		</li>
		<li>Using Custom Markers
			<p><span>Page 394, Figs A and B:</span> <a href="chapter-15/using-custom-markers-step1.html">using-custom-markers-step1.html</a> and <a href="chapter-15/css/using-custom-markers-step1.css">using-custom-markers-step1.css</a></p>
			<p><span>Page 395, Fig D:</span> <a href="chapter-15/using-custom-markers-step2.html">using-custom-markers-step2.html</a> and <a href="chapter-15/css/using-custom-markers-step2.css">using-custom-markers-step2.css</a></p>
			<p><span>Page 396, Fig F:</span> <a href="chapter-15/using-custom-markers-step3.html">using-custom-markers-step3.html</a> and <a href="chapter-15/css/using-custom-markers-step3.css">using-custom-markers-step3.css</a></p>
		</li>
		<li>Choosing Where to Start List Numbering
			<p><span>Page 397, Fig A:</span> <a href="chapter-15/choosing-where-to-start-numbering.html">choosing-where-to-start-numbering.html</a></p>
		</li>
		<li>Controlling Where Markers Hang
			<p><span>Page 398, Fig A:</span> <a href="chapter-15/controlling-where-markers-hang-default.html">controlling-where-markers-hang-default.html</a></p>
			<p><span>Page 398, Fig B:</span> <a href="chapter-15/controlling-where-markers-hang-inside.html">controlling-where-markers-hang-inside.html</a> (the CSS is embedded in the HTML)</p>
		</li>
		<li>Setting All List-Style Properties at Once
			<p><span>Page 399, Fig A:</span> <a href="chapter-15/setting-all-list-style-properties.html">setting-all-list-style-properties.html</a> (the CSS is embedded in the HTML)</p>
		</li>
		<li>Styling Nested Lists
			<p><span>Page 400-401, Figs A and B:</span> <a href="chapter-15/nested-lists.html">nested-lists.html</a> and <a href="chapter-15/css/nested-lists.css">nested-lists.css</a></p>
			<p><span>Extra Example&#8212;how to style with classes instead (per second tip on page 401):</span> <br /><a href="chapter-15/nested-lists-with-classes.html">nested-lists-with-classes.html</a> and <a href="chapter-15/css/nested-lists-with-classes.css">nested-lists-with-classes.css</a></p>
			<p id="dropdown-nav-example"><span>Page 402-403, Fig D and sidebar:</span> <a href="chapter-15/dropdown-nav.html">dropdown-nav.html</a> and <a href="chapter-15/css/dropdown-nav.css">dropdown-nav.css</a></p>
		</li>
		<li>Creating Description Lists
			<p><span>Page 404, Figs A and B:</span> <a href="chapter-15/description-list.html">description-list.html</a> (the CSS is embedded in the HTML)</p>
			<p><span>Page 405, Figs D and E:</span> <a href="chapter-15/description-list-multiple-dts.html">description-list-multiple-dts.html</a>  (the CSS is embedded in the HTML)</p>
			<p><span>Page 406-407, Figs G and H:</span> <a href="chapter-15/description-list-nested.html">description-list-nested.html</a> and <a href="chapter-15/css/description-list-nested.css">description-list-nested.css</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<!-- ==== CHAPTER 16 ==== -->
	<h2 id="chapter-16"><span>Chapter 16</span> Forms</h2>
	<ol class="topics">
		<li>Creating Forms
			<p><span>Page 413, Fig A:</span> <a href="chapter-16/form.html">form.html</a> (This is the main form discussed throughout the chapter.)</p>
			<p><span>Page 414, Fig B:</span> <a href="chapter-16/css/form.css">form.css</a></p>
		</li>
		<li>Processing Forms
				<p><span class="extra">Extra (referenced on Page 416, Fig A):</span> <a href="chapter-16/show-data.php">show-data.php</a></p>

				<p class="note-about-file"><strong>NOTE:</strong> This sample PHP script collects the information submitted with <code>form.html</code> and displays it in your browser. You will need to put the file on a web server for it to work. Open this file in your text editor and read the comment that begins with "TO TEST THIS SCRIPT" for additional important instructions.</p>

				<p><span class="extra">Extra (referenced on Page 416, Fig A):</span> <a href="chapter-16/email-data.php">email-data.php</a></p>

				<p class="note-about-file"><strong>NOTE:</strong> This sample PHP script collects the information submitted with the form and emails it to the email addresses you specify in the script. You will need to put it on a web server for it to work. Open this file in your text editor and read the comment that begins with "TO TEST THIS SCRIPT" for additional important instructions.</p>
		</li>
		<li>Disabling Form Elements
			<p><span>Page 444, Fig A:</span> <a href="chapter-16/disabled.html">disabled.html</a></p>
			<p><span>Page 445, first tip:</span> <a href="chapter-16/js/toggle-textarea.js">toggle-textarea.js</a> (<code>disabled.html</code> uses it)</p>
		</li>
	</ol>

	<p><a href="#chapters-list">Back to Top</a></p>
	
	<!-- ==== CHAPTER 17 ==== -->
	
	<h2 id="chapter-17"><span>Chapter 17</span> Video, Audio, and Other Multimedia</h2>
	<div class="note">
		<p><strong>Reminder:</strong> Include the HTML5 shiv in the <code>head</code> of your HTML if you'd like Internet Explorer 6, 7, and 8 to recognize HTML5 elements and render the CSS you apply to them. (It *won't* make the <code>video</code> or <code>audio</code> element <em>work</em> in these older browsers, though, because they don't support those HTML5 elements.) See "The HTML5 Shiv" in Chapter 11 (p.273) for details, or see <a href="http://code.google.com/p/html5shiv/" rel="external">http://code.google.com/p/html5shiv/</a>.</p>
	</div>
	
	<ol class="topics">
		<li>Adding a Single Video to Your Webpage
			<p><span>Page 452, Fig A:</span> <a href="chapter-17/webm-video.html">webm-video.html</a></p>
			<p><span>Page 452, Fig C:</span> <a href="chapter-17/webm-video-with-dimensions.html">webm-video-with-dimensions.html</a></p>
		</li>
		<li>Adding Controls and Autoplay to Your Video
			<p><span>Page 454, Fig A:</span> <a href="chapter-17/webm-video-with-controls.html">webm-video-with-controls.html</a></p>
			<p><span>Page 455, Fig G:</span> <a href="chapter-17/webm-video-with-controls-autoplay.html">webm-video-with-controls-autoplay.html</a></p>
		</li>
		<li>Looping a Video and Specifying a Poster Image
			<p><span>Page 456, Fig A:</span> <a href="chapter-17/webm-video-with-autoplay-loop.html">webm-video-with-autoplay-loop.html</a></p>
			<p><span class="extra">Extra:</span> <a href="chapter-17/mp4-video-with-autoplay-loop.html">mp4-video-with-autoplay-loop.html</a></p>
			<p><span>Page 456, Fig B:</span> <a href="chapter-17/webm-video-with-poster-image.html">webm-video-with-poster-image.html</a></p>
		</li>
		<li>Preventing a Video from Preloading
			<p><span>Page 457, Fig A:</span> <a href="chapter-17/webm-video-with-preload-none.html">webm-video-with-preload-none.html</a></p>
			<p><span>Page 458, sidebar:</span> <a href="chapter-17/webm-video-with-preload-metadata.html">webm-video-with-preload-metadata.html</a></p>
		</li>
		<li>Using Video with Multiple Sources and a Text Fallback
			<p><span>Page 459, Fig A:</span> <a href="chapter-17/video-with-sources-and-text-link-fallback.html">video-with-sources-and-text-link-fallback.html</a></p>
		</li>
		<li>Adding an Audio File with Controls to Your Webpage
			<p><span>Page 464, Fig A:</span> <a href="chapter-17/ogg-audio-with-controls.html">ogg-audio-with-controls.html</a></p>
		</li>
		<li>Autoplaying, Looping, and Preloading Audio
			<p><span>Page 466, Fig A:</span> <a href="chapter-17/ogg-audio-with-autoplay-controls.html">ogg-audio-with-autoplay-controls.html</a></p>
			<p><span>Page 466, Fig C:</span> <a href="chapter-17/ogg-audio-with-loop-controls.html">ogg-audio-with-loop-controls.html</a></p>
			<p><span>Page 466, Fig D:</span> <a href="chapter-17/ogg-audio-with-preload-metadata.html">ogg-audio-with-preload-metadata.html</a></p>
			<p><span>Extra:</span> <a href="chapter-17/ogg-audio-with-preload-none.html">ogg-audio-with-preload-none.html</a></p>
		</li>
		<li>Providing Multiple Audio Sources with a Fallback
			<p><span>Page 468, Fig A:</span> <a href="chapter-17/audio-with-sources-and-link-fallback.html">audio-with-sources-and-link-fallback.html</a></p>
		</li>
		<li>Adding Video and Audio with a Flash Fallback
			<p><span>Page 471, Fig D:</span> <a href="chapter-17/video-audio-flash-fallback-add-file-to-head.html">video-audio-flash-fallback-add-file-to-head.html</a></p>
			<p><span>Page 472, Fig F:</span> <a href="chapter-17/video-flash-fallback.html">video-flash-fallback.html</a></p>
			<p><span>Page 473, Fig H:</span> <a href="chapter-17/audio-flash-fallback.html">audio-flash-fallback.html</a></p>
			<p><span>Page 473, Fig J:</span> <a href="chapter-17/video-and-audio-flash-fallback.html">video-and-audio-flash-fallback.html</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
	
	<h2 id="chapter-18"><span>Chapter 18</span> Tables</h2>
	<ol class="topics">
		<li>Structuring Tables
			<p><span>Page 478, Fig A:</span> <a href="chapter-18/table.html">table.html</a></p>
			<p><span>Page 479, Fig C:</span> <a href="chapter-18/table-evolved.html">table-evolved.html</a></p>
			<p><span>Page 479-480, Figs C and E:</span> <a href="chapter-18/css/table-evolved-and-styled.css">table-evolved-and-styled.css</a> and <a href="chapter-18/table-evolved-and-styled.html">table-evolved-and-styled.html</a> <br />(the same as table-evolved.html except it loads the style sheet)</p>
		</li>
		<li id="spanning-columns-and-rows">Spanning Columns and Rows
			<p><span>Page 482, Fig A:</span> <a href="chapter-18/table-with-colspan-rowspan.html">table-with-colspan-rowspan.html</a> and <a href="chapter-18/css/table-with-colspan-rowspan.css">table-with-colspan-rowspan.css</a> (Extra)</p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>

	<h2 id="chapter-19"><span>Chapter 19</span> Working with Scripts</h2>
	<div class="note">
		<p><strong>Note:</strong> You won't gain much from viewing these pages in a browser; their value is in the HTML code and comments. In particular, I've included comments in <a href="chapter-19/load-before-body-end-tag.html">load-before-body-end-tag.html</a> and <a href="chapter-19/load-before-body-end-tag-subfolder.html">load-before-body-end-tag-subfolder.html</a> about why the code in the latter is preferred from the standpoint of organizing your JavaScript files.</p>
	</div>
	
	<ol class="topics">
		<li>Loading an External Script
			<p><span>Page 487, Fig A:</span> <a href="chapter-19/load-before-body-end-tag.html">load-before-body-end-tag.html</a></p>
			<p><span class="extra">Extra:</span> <a href="chapter-19/load-before-body-end-tag-subfolder.html">load-before-body-end-tag-subfolder.html</a> (preferred; it loads the JS from a sub-folder)</p>
			<p><span>Page 487, Fig B:</span> <a href="chapter-19/load-in-head.html">load-in-head.html</a></p>
			<p id="script-with-comments"><span>Page 488, Fig C:</span> <a href="chapter-19/js/sample-script.js">js/sample-script.js</a></p>
			<p><span>Page 489, Fig D:</span> <a href="chapter-19/js/sample-script.min.js">js/sample-script.min.js</a></p>
		</li>
		<li>Adding an Embedded Script
			<p><span>Page 492, Fig A:</span> <a href="chapter-19/embedded-before-body-end-tag.html">embedded-before-body-end-tag.html</a></p>
			<p><span>Page 492, Fig B:</span> <a href="chapter-19/embedded-in-head.html">embedded-in-head.html</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>

	<h2 id="chapter-20"><span>Chapter 20</span> Testing & Debugging Web Pages</h2>
	<ol class="topics">
		<li>Validating Your Code
			<p><a href="http://html5.validator.nu/" rel="external">HTML5 Validator</a></p>
			<p><a href="http://validator.w3.org/" rel="external">W3C HTML Validator (including HTML5)</a></p>
			<p><a href="http://jigsaw.w3.org/css-validator/" rel="external">W3C CSS Validator</a></p>
			<p><span>Page 496-497, Fig A and C:</span> <a href="chapter-20/h1-error.html">h1-error.html</a></p>
			<p><span class="extra">Extra (as shown in Fig E):</span> <a href="chapter-20/h1-fixed.html">h1-fixed.html</a></p>
		</li>
		<li>Testing Your Pages
			<p><span>Page 498, Fig B:</span> <a href="chapter-20/testing-your-page-error.html">testing-your-page-error.html</a></p>
		</li>
		<li>When Images Don't Display
			<p><span>Page 510, Fig A:</span> <a href="chapter-20/image-does-not-display.html">image-does-not-display.html</a></p>
			<p><span>Extra:</span> <a href="chapter-20/image-displays.html">image-displays.html</a></p>
		</li>
	</ol>
	
	<p><a href="#chapters-list">Back to Top</a></p>
</div>
</main>

<!-- ==== START FOOTER ==== -->
<footer role="contentinfo">
	<p class="copyright"><small>&copy; Copyright 2013 htmlcssvqs.com. All rights reserved.</small></p>
</footer>
<!-- end footer -->
</div>
</body>
</html>